<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>

    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
    <script src="../static/elementui/index.js"></script>
    <style type="text/css">
        #all {
            width: 1290px;
            margin: 0 auto;
            margin-top: 15px;
        }

    </style>
</head>


<body>
<div id="all">

    <div id="table">
        <el-card class="box-card">
            <div style="padding-bottom: 10px">
                <el-button type="primary" icon="el-icon-document-add" @click="newAdminFormVisible = true">添加
                </el-button>
            </div>
            <template>
                <el-table :data="tableData"  border style="width: 100%">
                    <el-table-column type="index" label="序号" align="center" width="60">
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色名" align="center" width="140">
                    </el-table-column>
                    <el-table-column prop="roleDesc" label="角色描述" width="220">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="220" :formatter="formatDate">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center" >
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#DCDFE6"
                                       :active-value=0
                                       :inactive-value=1
                                       active-text="启用"
                                       inactive-text="禁用"
                                       @change="changeSwitch($event,scope.row,scope.$index)">
                                <!--$event 当前状态 1/0  scope.row：当前行的数据  scope.$index：当前行的索引-->
                            </el-switch>
                        </template>

                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" icon="el-icon-edit" @click="editorShow(scope.row)">
                                编辑
                            </el-button>
                            <el-button @click="del(scope.row,scope.$index)" type="danger" icon="el-icon-delete"
                                       size="small">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-card>

        <!-- 编辑管理员弹窗 -->
        <el-dialog title="编辑角色信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="角色名字" :label-width="formLabelWidth">
                    <el-input v-model="form.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateRoleMsg">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 新增管理员弹窗 -->
        <el-dialog title="新增角色" :visible.sync="newAdminFormVisible" @open="open">
            <el-form :model="newAdminForm">
                <el-form-item label="角色名" :label-width="formLabelWidth">
                    <el-input v-model="newAdminForm.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="newAdminForm.roleDesc"  autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="newAdminFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdmin">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#all",
        data: {
            tableData: [],
            dialogFormVisible: false,
            newAdminFormVisible: false,
            form: {
                id:'',
                roleName: '',
                roleDesc: '',
            },
            newAdminForm: {
                roleName: '',
                roleDesc: '',
            },
            formLabelWidth: '120px',
        },
        created() {
            this.getRoleList();
        },
        methods: {
            getRoleList() {
                axios.get('../role/findList', {
                })
                    .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        this.tableData = res.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            changeSwitch(status, data, index) {
                axios({
                    method: 'PUT',
                    url: '../role/updateMsg',
                    params: {
                        status: status,
                        id: data.id,
                    },
                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '已成功更改此角色状态',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: '系统繁忙',
                            type: 'error'
                        })
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            selectTrigger(val) {
                this.roleId = val;
                this.getRoleList();
            },
            del(row, index) { //删除
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'DELETE',
                        url: '../role/del/' + row.id,
                    }).then(res => {
                        if (res.data.code === 200) {
                            vm.tableData.splice(index, 1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                message: res.data.message
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //弹出窗体展示数据使用的方法
            editorShow(row) {
                this.form.id = row.id;
                this.form.roleName = row.roleName
                this.form.roleDesc = row.roleDesc
                this.dialogFormVisible = true;
            },
            updateRoleMsg() {
                axios({
                    method: 'PUT',
                    url: '../role/updateMsg',
                    params: {
                        roleName: this.form.roleName,
                        roleDesc: this.form.roleDesc,
                        id: this.form.id,
                    },

                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        //关闭窗口
                        this.getRoleList()
                        this.dialogFormVisible = false
                    } else {
                        this.$message({
                            message: '系统繁忙',
                            type: 'error'
                        })
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //新增窗口打开时候清空默认值
            open() {
                this.newAdminForm.roleName = ''
                this.newAdminForm.roleDesc = ''
            },
            saveAdmin() {
                //开启弹窗
                this.newAdminFormVisible = true
                let roleName = this.newAdminForm.roleName
                let roleDesc = this.newAdminForm.roleDesc
                if (roleName === '' || roleDesc === '') {
                    this.$message({
                        message: '必填项不能为空',
                        type: 'info'
                    })
                    return
                }
                axios({
                    method: 'POST',
                    url: '../role/saveRole',
                    params: {
                        roleName: roleName,
                        roleDesc: roleDesc,
                    },

                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        })
                        //关闭窗口
                        this.getRoleList()
                        this.newAdminFormVisible = false
                    } else {
                        this.$message({
                            message: '系统繁忙',
                            type: 'error'
                        })
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //时间格式化
            formatDate:function(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                // if (this.$MyComm.isEmpty(data)) {
                // 	return ''
                // }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            },
        }
    })
</script>

</html>